<!DOCTYPE html>
<html>
<head>
    <%- include('./_blocks/head', { siteTitle: `文章归档 | ${themeConfig.siteName}` }) %>
</head>
<body class="tag-template">
<div id="page" class="site">

    <%- include('./_blocks/header') %>

    <main class="site-main">
        <div class="site-content">

            <header class="cover page-header">
                <div class="cover-bg" style="background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);"></div>
                <div class="cover-content">
                    <div class="inner">
                        <div class="post-count"></div>
                        <h1 class="page-title" style="font-size: 46px;">归档</h1>
                    </div>
                </div>
            </header>

            <% let years = []; posts.forEach((item) => {
                const year = item.date.substring(0, 4);
                if (!years.includes(year)) {
                    years.push(year);
                }
            }); %>
            <div id="post-list" class="post-list inner">
                <% years.forEach(function(year) { %>

                    <article class="post">
                        <!-- post-header -->
                        <header class="post-header">
                            <div class="post-header-wrap">
                                <div class="post-meta">
                                    <time class="published published-txt" style="font-weight: bolder; font-size: 1.5em" datetime="<%- year %>">
                                        <%- year %>
                                    </time>
                                </div>
                                <div class="post-title archives-list">
                                    <% posts.forEach(function(post) { %>

                                        <% if (post.date.indexOf(year) !== -1) { %>
                                            <div class="read-more">
                                                <a class="button" href="<%= post.link %>">
                                                    <%= post.title %>
                                                    <span aria-hidden="true"></span>
                                                    <span class="line left"></span>
                                                    <span class="line top"></span>
                                                    <span class="line right"></span>
                                                    <span class="line bottom"></span>
                                                </a>
                                            </div>
                                        <% } %>

                                    <% }); %>
                                </div>
                            </div>
                        </header>
                    </article>

                <% }); %>

            </div>
        </div>
    </main>

    <%- include('./_blocks/footer') %>

</div>

<%- include('./_blocks/scripts') %>

</body>
</html>
